﻿@model Matrix.MaKaYunShang.Model.DataStatisticsModels.DataStatShopOrders
@{
    ViewBag.Title = "订单统计报表";
    ViewBag.PathToBtn = "/GfcStat/OrderStatisticsList";
    ViewBag.TextBtn = "刷新";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section css{
    <style type="text/css">
        .nav-tabs li {
            cursor: pointer;
        }

        .table hr {
            margin: 5px 0;
            border: dashed 1px #aaa;
        }

        #TransferShopModal {
            top: 20%;
        }
    </style>
}
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-body">
                <form>
                   
                    &nbsp;&nbsp;<input type="checkbox" id="isGroupbyShop" name="isGroupbyShop" class="form-control" style="width: 15px; height:15px; display: inline-block" /> &nbsp;&nbsp;是否按店铺分组
                    &nbsp;&nbsp; <input type="checkbox" id="isGroupByPayWay" class="form-control" name="isGroupByPayWay" style="width: 15px; height:15px; display: inline-block" /> &nbsp;&nbsp;是否按支付方式分组
                    &nbsp;&nbsp;<input type="checkbox" id="isGroupByOrderStatus" name="isGroupByOrderStatus" class="form-control" style="width: 15px; height:15px; display: inline-block" />&nbsp;&nbsp;是否按订单状态分组
                    &nbsp;&nbsp;下单时间: &nbsp;&nbsp;<input type="text" class="form-control input-sm form_datetime_order_search" placeholder="开始时间" style="width: 110px;display: inline-block" id="dtBeginTime" name="dtBeginTime" />
                    --
                    <input type="text" class="form-control input-sm form_datetime_order_search" placeholder="结束时间" style="width: 110px;display: inline-block" id="dtEndTime" name="dtEndTime" />
                    &nbsp;&nbsp;
                    <br /><br />
                    店铺：
                    <input type="text" data-target='#TransferShopModal' data-toggle='modal' class="form-control input-sm" placeholder="店铺名称" style="width: 150px;display: inline-block" id="shopName" />
                    <input type="text" id="ShopId" name="ShopId" style=" display:none" />
                    &nbsp;&nbsp;
                    时间条件:
                    <select id="queryDateType" name="queryDateType" class="form-control input-sm" style=" width: 140px; display: inline-block">
                        <option value="0">按日统计</option>
                        <option value="1">按周统计</option>
                        <option value="2">按月统计</option>
                        <option value="3">按年统计</option>
                    </select>
                    &nbsp;&nbsp;
                    支付方式:
                    <select id="orderPayWay" name="orderPayWay" class="form-control input-sm" style=" width: 140px; display: inline-block">
                        <option value="">全部</option>
                        <option value="0">微信支付</option>
                        <option value="1">纸质水票支付</option>
                        <option value="2">现金支付</option>
                        <option value="3">电子水票</option>
                    </select>
                    订单状态:
                    <select id="orderStatus" name="orderStatus" class="form-control input-sm" style=" width: 140px; display: inline-block">
                        <option value="">全部</option>
                        <option value="0">待支付</option>
                        <option value="1">等待派单</option>
                        <option value="2">正在配送</option>
                        <option value="3">已送到</option>
                        <option value="4">已完成</option>
                        <option value="5">已取消</option>
                        <option value="6">已退回</option>
                    </select>
                    <input type="reset" value="清空条件" class="btn btn-info" style="margin-left: 10px;" />
                    <a class="btn btn-primary pull-right" style="margin-left: 10px;" id="btnExport">导出</a>
                    <a class="btn btn-primary pull-right" id="btnSearch">查询</a>
                </form>
            </div>
        </div>
    </div>

</div>
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <div class="panel-heading">
                订单详情
            </div>
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
                        <thead>
                            <tr>
                                <th>店铺名称</th>
                                <th>统计时间</th>
                                <th>订单状态描述</th>
                                <th>支付方式</th>
                                <th>订单数</th>
                                <th>订单总价</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="TransferShopModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 500px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">查询店铺（<font color="red">仅显示已激活的店铺</font>）</h4>
            </div>
            <div class="modal-body">
                <div style="margin-bottom: 5px;">
                    <input type="text" class="form-control" placeholder="店铺名称" style="width: 409px;display: inline-block" id="shopKeyWords" />
                    <a class="btn btn-primary" onclick="searchShops();">查询</a>
                </div>
                <div class="table-responsive table-bordered" style="max-height: 250px;">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>店铺名称</th>
                                <th>距离用户（米）</th>
                                <th style="text-align: center">操作</th>
                            </tr>
                        </thead>
                        <tbody id="shopsData"></tbody>
                    </table>
                    <input type="hidden" id="hidOrderId" />
                </div>
            </div>
        </div>
    </div>
</div>
<iframe id="exportOrderFrame" style="display:none "></iframe>
@section javascript{
    <script src="~/Content/admin/dist/js/pagingHelper.js"></script>
    <script type="text/javascript">
        var dataParams = {};
        var serverProcessPath = "/GfcStat/OrderStatisticsListing";
        var showColumns = [
            { data: "ShopName" },
            { data: "OrderDate" },
            { data: "OrderStatusDesc" },
            { data: "PayWayDesc" },
            { data: "OrderAmount" },
            { data: "TotalPrice" }
        ];
        pagingHelper.Paging(serverProcessPath, dataParams, showColumns, null, false);
        $("#dataTables-example_wrapper div:first").hide();

        $(function () {
            $('.form_datetime_order_search').datetimepicker({
                format: 'yyyy-mm-dd',
                language: 'zh-CN',
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });
            $("#btnSearch").click(function () {
                reloadOrder();
            });

            $("#btnExport").click(function () {
         
                alertify.okBtn("确定").cancelBtn("取消").confirm("将导出当前搜索条件下的所有数据，确定导出吗（导出时间较长，请耐心等候）？", function () {
                    $.post("@Url.Action("ExportExcelDataStatShopOrdersPage")" + "?dtBeginTime=" + $("#dtBeginTime").val() + "&dtEndTime=" + $("#dtEndTime").val() + "&shopId=" + $("#ShopId").val() + "&queryDateType=" + $("#queryDateType").val() + "&isGroupbyShop=" + $("#isGroupbyShop").prop('checked') + "&isGroupByPayWay=" + $("#isGroupByPayWay").prop('checked') + "&isGroupByOrderStatus=" + $("#isGroupByOrderStatus").prop('checked') + "&orderPayWay=" + $("#orderPayWay").val() + "&orderStatus=" + $("#orderStatus").val(), {}, function (data) {
                        if (data.Status) {
                            $("#exportOrderFrame").attr("src", data.Message);
                        } else {
                            alertify.alert(data.Message);
                        }
                    });
                });
            });
            searchShops();
        });


        function selectShop(shopId, name) {
            $("#ShopId").val(shopId);
            $("#shopName").val(name);
            $("#TransferShopModal").modal("hide");
        }

        function searchShops() {
            $("#shopsData").html("");
            $("#ShopId").val("");
            $("#shopName").val("")
            $.post("@Url.Action("GetShopList")", "keyWords=" + encodeURIComponent($("#shopKeyWords").val()), function (data) {
                if (data.Status) {
                    for (var i = 0; i < data.Data.length; i++) {
                        var OrderName = "'" + data.Data[i].Name + "'";
                        $("#shopsData").append("<tr><td>" + data.Data[i].Name + "</td><td>" + data.Data[i].Distance.toFixed(2) + "</td><td align='center'><a class='btn btn-info' onclick=\"selectShop(" + data.Data[i].Id + "," + OrderName.toString() + ");\">选择</a></td></tr>");
                    }
                } else {
                    alertify.alert(data.Message);
                }
            });
        }

        function reloadOrder() {
            pagingHelper.reloadWithDiffPath("@Url.Action("OrderStatisticsListing")" + "?dtBeginTime=" + $("#dtBeginTime").val() + "&dtEndTime=" + $("#dtEndTime").val() + "&shopId=" + $("#ShopId").val() + "&queryDateType=" + $("#queryDateType").val() + "&isGroupbyShop=" + $("#isGroupbyShop").prop('checked') + "&isGroupByPayWay=" + $("#isGroupByPayWay").prop('checked') + "&isGroupByOrderStatus=" + $("#isGroupByOrderStatus").prop('checked') + "&orderPayWay=" + $("#orderPayWay").val() + "&orderStatus=" + $("#orderStatus").val());
        }
    </script>
}